import { createApp } from 'vue';
import './styles/index.css';
import App from './App.vue';
import * as IconPark from '@icon-park/vue-next';
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import {createPinia} from "pinia";
import router from "@/utils/router";
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 导入 SVG 图标设置工具
import setupSvgIcons from './utils/globleRegisterIcons/icons.ts';

const app = createApp(App);

// 设置 SVG 图标
setupSvgIcons();

//elements组件
app.use(ElementPlus, {
    locale: zhCn,//本土化
});

// 创建仓库
const pinia = createPinia();
app.use(pinia);

// 注册所有图标组件
Object.keys(IconPark).forEach(key => {
    if (key !== 'default') {
        app.component(key, (IconPark as any)[key]);
    }
});

//element图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//注册路由
app.use(router);

app.mount("#app");

/*
* 当前的注册情况分析
SVG 图标注册：
    通过 setupSvgIcons() 函数注册自定义 SVG 图标
    使用 <svg-icon> 组件调用
IconPark 图标注册：
    通过 Object.keys(IconPark).forEach() 注册阿里巴巴图标库
    直接使用组件名调用，如 <Home />
Element Plus 图标注册：
    通过 Object.entries(ElementPlusIconsVue) 注册 Element Plus 官方图标
    直接使用组件名调用，如 <Edit />
结论
三种图标库的注册方式各不相同，分别针对不同来源的图标：
    自定义 SVG 图标
    IconPark 图标库
    Element Plus 官方图标库
每种图标只注册了一次，没有重复注册的问题。*/